<template>
  <div class="container">
    <!--    左侧树-->
    <div class="left-tree">
      <div class="left-header">
        <el-input
          placeholder="请输入搜索内容"
          size="mini"
          clearable
          v-model="filterText"
        ></el-input>
        <TsButton
          perms="departments:post"
          label="新增"
          class="c-m-l-10"
          type="primary"
          size="mini"
          @click="addDepartments"
        >
        </TsButton>
      </div>
      <el-tree
        class="c-m-t-10 c-font-14"
        :data="treeData"
        :filter-node-method="filterNode"
        show-checkbox
        default-expand-all
        node-key="id"
        check-strictly
        :expand-on-click-node="false"
        @check="handleNodeClick"
        ref="treeRef"
      >
        <template #default="{ node, data }">
          <div class="tree-item">
            <span>{{ data.name }}</span>
            <div class="item-btn">
              <TsButton
                perms="departments:post"
                @click="addNode(data)"
                type="text"
                icon="el-icon-circle-plus-outline"
              ></TsButton>
              <TsButton
                perms="departments:$id:put"
                @click="editNode(data, node)"
                type="text"
                icon="el-icon-edit"
              ></TsButton>
              <TsButton
                perms="departments:$id:delete"
                @click="delNode(data)"
                type="text"
                icon="el-icon-delete"
                style="color: #ff5d5d"
              ></TsButton>
            </div>
          </div>
        </template>
      </el-tree>
    </div>
    <!--    右侧表格区域-->
    <div class="right-table">
      <div class="right-header">
        <div class="hd-left">
          <i class="el-icon-arrow-left"></i>
          <span>请在左侧选择部门</span>
        </div>
        <div class="hd-right">
          <TsButton
            perms="departments:$id:monitors:post"
            label="新增"
            type="primary"
            size="mini"
            @click="addTableData"
          ></TsButton>
        </div>
      </div>
      <div class="c-m-t-20" style="height: 560px; overflow-y: auto">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          :header-cell-style="{ background: '#FEF6F6', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="nickname" label="姓名" />
          <el-table-column prop="mobile" label="联系方式" />
          <el-table-column prop="positionName" label="职位" />
          <el-table-column prop="competenceName" label="职级" />
          <el-table-column prop="principal" label="主要负责人">
            <template #default="scope">
              <el-tag size="small"
                >{{ scope.row.principal === true ? "是" : "否" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="areaName" label="区域" />
          <el-table-column label="操作">
            <template #default="scope">
              <TsButton
                perms="departments:monitors:$monitorsId:put"
                label="编辑"
                icon="el-icon-edit"
                type="text"
                size="small"
                @click="addTableData(scope.row)"
              >
              </TsButton>
              <TsButton
                label="删除"
                perms="departments:monitors:$monitorsId:delete"
                icon="el-icon-delete"
                type="text"
                size="small"
                style="color: #ff5d5d"
                @click="delTableData(scope.row.id)"
                >删除
              </TsButton>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--      分页区域-->
      <el-pagination
        style="float: right; margin: 20px"
        @size-change="pageSizeChange"
        @current-change="pageCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        layout=" prev, pager, next"
        :total="totalNum"
        background
      >
      </el-pagination>
    </div>
    <!--    顶部新增对话框-->
    <el-dialog v-model="addChildDialogVisible" title="新增" width="30%">
      <el-form :model="addForm" ref="addNodeRef" :rules="addNodeRules">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="mini" type="primary" @click="submitDepartment"
            >确定</el-button
          >
          <el-button
            size="mini"
            @click="addChildDialogVisible = false"
            type="danger"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!--    节点新增对话框-->
    <el-dialog v-model="nodeAddDialogVisible" title="编辑" width="30%">
      <el-form :model="nodeAddForm" ref="nodeRef">
        <el-form-item label="父级部门">
          <el-input
            disabled
            size="small"
            v-model="nodeAddForm.parentName"
          ></el-input>
        </el-form-item>
        <el-form-item label="部门名称" prop="name">
          <el-input size="small" v-model="nodeAddForm.name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="mini" type="primary" @click="submitAddNode"
            >确定</el-button
          >
          <el-button
            size="mini"
            @click="nodeAddDialogVisible = false"
            type="danger"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!--    节点编辑对话框-->
    <el-dialog v-model="nodeEditDialogVisible" title="编辑" width="30%">
      <el-form :model="editNodeForm" ref="editNodeRef">
        <el-form-item label="父级部门">
          <el-input v-model="editNodeForm.parentName" disabled></el-input>
        </el-form-item>
        <el-form-item label="部门名称">
          <el-input v-model="editNodeForm.name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="mini" type="primary" @click="submitEditNode"
            >确定</el-button
          >
          <el-button
            size="mini"
            @click="nodeEditDialogVisible = false"
            type="danger"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!--表格新增操作    -->
    <el-dialog v-model="tableDialogVisible" :title="dialogTile" width="50%">
      <el-form
        :model="tableForm"
        :rules="rules"
        label-width="110px"
        label-position="right"
        ref="tableRef"
      >
        <el-form-item label="姓名" prop="name">
          <el-select
            v-model="tableForm.name"
            placeholder="请选择姓名"
            style="width: 100%"
          >
            <el-option
              v-for="item in nameOption"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="联系方式" prop="mobile">
          <el-input
            disabled
            v-model="tableForm.mobile"
            placeholder="联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item label="职位" prop="job">
          <el-select
            v-model="tableForm.job"
            placeholder="请选择职位"
            style="width: 100%"
          >
            <el-option
              v-for="item in jobOption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="职能" prop="zn">
          <el-select
            v-model="tableForm.zn"
            placeholder="请选择职能"
            style="width: 100%"
          >
            <el-option
              v-for="item in znOption"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="区域" prop="area">
          <el-cascader
            style="width: 100%"
            :key="areaOption.id"
            v-model="tableForm.area"
            :options="areaOption"
            :props="{
              expandTrigger: 'hover',
              label: 'name',
              value: 'id',
              emitPath: false,
            }"
            @change="handleCascaderChange"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="主要负责人">
          <el-radio-group v-model="tableForm.principal">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="mini" type="primary" @click="submitMonitors"
            >确定</el-button
          >
          <el-button
            size="mini"
            @click="tableDialogVisible = false"
            type="danger"
            >取消</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import DepartmentSetting from "@/composables/system/department-setting";
import commonPageRepository from "../../composables/common-page-repository";
import TsButton from "../../components/TsButton";
export default {
  name: "DepartmentSetting",
  components: { TsButton },
  setup() {
    const {
      addNodeRules,
      dialogTile,
      areaList,
      rules,
      handleCascaderChange,
      treeData,
      addForm,
      addDepartments,
      addChildDialogVisible,
      submitDepartment,
      nodeAddDialogVisible,
      nodeAddForm,
      submitAddNode,
      addNode,
      nodeEditDialogVisible,
      editNodeForm,
      editNode,
      submitEditNode,
      delNode,
      handleNodeClick,
      treeRef,
      tableData,
      pageNum,
      pageSize,
      totalNum,
      addTableData,
      tableForm,
      submitMonitors,
      tableDialogVisible,
      nameOption,
      jobOption,
      znOption,
      areaOption,
      delTableData,
      filterNode,
      filterText,
      addNodeRef,
      nodeRef,
      editNodeRef,
      getMonitors,
      tableRef,
    } = DepartmentSetting();
    const { pageSizeChange, pageCurrentChange } = commonPageRepository(
      pageSize,
      pageNum,
      getMonitors
    );
    return {
      addNodeRules,
      filterNode,
      dialogTile,
      rules,
      handleCascaderChange,
      treeData,
      areaList,
      pageSizeChange,
      pageCurrentChange,
      addForm,
      addChildDialogVisible,
      addDepartments,
      submitDepartment,
      nodeAddDialogVisible,
      nodeAddForm,
      submitAddNode,
      addNode,
      nodeEditDialogVisible,
      editNodeForm,
      editNode,
      submitEditNode,
      delNode,
      handleNodeClick,
      treeRef,
      tableData,
      pageNum,
      pageSize,
      totalNum,
      addTableData,
      tableForm,
      submitMonitors,
      tableDialogVisible,
      nameOption,
      jobOption,
      znOption,
      areaOption,
      delTableData,
      filterText,
      addNodeRef,
      nodeRef,
      editNodeRef,
      tableRef,
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 180px);
  display: flex;
  justify-content: space-between;
  .left-tree {
    background: #ffffff;
    padding: 20px 12px;
    border-radius: 6px;
    width: 360px;
    overflow-y: auto;
    .left-header {
      display: flex;
    }
    .tree-item {
      display: flex;
      align-items: center;
      .item-btn {
        margin-left: 40px;
      }
    }
  }
  .right-table {
    position: relative;
    flex: 1;
    margin-left: 30px;
    background: #ffffff;
    padding: 20px 12px;
    overflow-y: auto;
    .right-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .pagination {
    position: absolute;
    bottom: 20px;
    right: 12px;
  }
}
</style>
